/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {StyleSheet, Text, View, Image, ImageBackground} from 'react-native';
import {RefreshControl, TouchableOpacity} from 'react-native-gesture-handler';
import {SafeAreaView} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/FontAwesome6';
import Ionicons from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import WaterfallFlow from 'react-native-waterfall-flow';
import LinearGradient from 'react-native-linear-gradient';
import {getRecommandLives} from '../api/api';
import NavigationBar from '../components/NavigationBar';
import UserProfileView from '../components/UserProfileView';
export default function HomeView({navigation}) {
  const [refreshing, setRefreshing] = useState(false);
  const [loadingNext, setLoadingNext] = useState(false);
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);

  const _renderItem = (item, index) => {
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          navigation.push('LivesView');
        }}>
        <ImageBackground
          imageStyle={{borderRadius: 8}}
          style={styles.card}
          source={{
            uri: 'https://pic-image.yesky.com/uploadImages/newPic/2023/271/56/789M5EGGWZPT.png',
          }}>
          <LinearGradient
            start={{x: 0.5, y: 0}}
            end={{x: 0.5, y: 1}}
            locations={[0, 0.2, 0.8, 1]}
            colors={[
              'rgba(0,0,0,0.2)',
              'rgba(0,0,0,0)',
              'rgba(0,0,0,0)',
              'rgba(0,0,0,0.2)',
            ]}
            style={styles.cardoverlay}>
            <View style={styles.lookCountContainer}>
              <Ionicons name="eye" color="white" />
              <Text style={styles.lookCountText}>9</Text>
            </View>
            <View style={{flex: 1}} />
            <View style={styles.rowflex}>
              <Image
                source={{
                  uri: 'https://ajl-lxa.oss-cn-hangzhou.aliyuncs.com/al/gifts/bixin.png',
                }}
                style={styles.avatar}
              />
              <View style={{marginLeft: 8}}>
                <Text style={styles.nameText}>Marry St</Text>
                <View style={styles.rowflex}>
                  <MaterialIcons name="diamond" color="#d3d3d3" />
                  <Text style={styles.diamonText}>18.37K</Text>
                </View>
              </View>
            </View>
          </LinearGradient>
        </ImageBackground>
      </TouchableOpacity>
    );
  };

  const _header = () => {
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => {
          //进入充值界面
          console.log('push to topup');
        }}>
        <ImageBackground
          style={{
            height: 60,
          }}
          source={{
            uri: 'https://pic-image.yesky.com/uploadImages/newPic/2023/271/56/789M5EGGWZPT.png',
          }}
        />
      </TouchableOpacity>
    );
  };

  const _refresh = async () => {
    setRefreshing(true);
    setLoadingNext(false);
    try {
      let res = await getRecommandLives({
        page: 1,
      });
      setRefreshing(false);
      let data = res.data;
      if (data.length > 0) {
        setList(data);
      }
    } catch {
      setRefreshing(false);
    }
  };

  const _loadNext = async () => {
    if (loadingNext === true) {
      return;
    }
    setLoadingNext(true);
    try {
      let res = await getRecommandLives({
        page: page + 1,
      });
      let data = res.data;
      if (data.length > 0) {
        let l = list.concat(data);
        setList(l);
        setPage(page + 1);
      }
      setLoadingNext(false);
    } catch {
      setLoadingNext(false);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <NavigationBar
        leftViews={
          <View style={styles.leftBarButton}>
            <TouchableOpacity>
              <Image
                source={{
                  uri: 'https://ajl-lxa.oss-cn-hangzhou.aliyuncs.com/al/gifts/bixin.png',
                }}
                style={styles.avatar}
              />
            </TouchableOpacity>
            <View style={styles.coinContainer}>
              <Icon name="coins" color="yellow" />
              <Text style={styles.coins}>0</Text>
            </View>
          </View>
        }
        rightViews={
          <Ionicons name="notifications-outline" color="white" size={24} />
        }
      />
      <WaterfallFlow
        ListHeaderComponent={_header}
        style={styles.collectionView}
        numColumns={2}
        showsVerticalScrollIndicator={false}
        data={list}
        keyExtractor={({item, index}) => index.toString()}
        renderItem={_renderItem}
        refreshControl={
          <RefreshControl onRefresh={_refresh} refreshing={refreshing} />
        }
        ListEmptyComponent={
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              marginTop: 150,
            }}>
            <Image
              source={require('../assets/HomeView/empty.png')}
              style={{
                width: 128,
                height: 128,
              }}
            />
            <Text style={{color: 'rgba(205,205,205,1)'}}>
              No Live Now,Try Pull Refresh
            </Text>
          </View>
        }
        onEndReached={_loadNext}
        onEndReachedThreshold={0.1}
      />
      <UserProfileView
        style={{
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
        }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'black',
  },
  navigationBar: {
    height: 44,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    paddingLeft: 16,
    paddingRight: 16,
  },
  avatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
  },
  coins: {
    color: 'white',
    marginLeft: 8,
  },
  leftBarButton: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  coinContainer: {
    marginLeft: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  card: {
    color: 'white',
    backgroundColor: 'white',
    height: 240,
    marginLeft: 4,
    marginTop: 4,
    borderRadius: 8,
  },
  collectionView: {
    flex: 1,
    width: '100%',
  },
  cardoverlay: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    padding: 10,
  },
  lookCountContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rowflex: {flexDirection: 'row', alignItems: 'center'},
  diamonText: {color: '#d3d3d3', fontSize: 12},
  nameText: {color: 'white', fontWeight: '600', fontSize: 14},
  lookCountText: {marginLeft: 4, color: 'white'},
});
